<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
    <style>
        div {
            width: 600px;
            margin: auto;
            border: 1px solid black;
            /* text-align: center; */
            padding: 20px;
            padding-bottom: 50px;
            padding-left: 40px;
            box-sizing: border-box;
            /* margin-top: 70px; */
            border-radius: 7px;
            background-color: rgba(172, 202, 235, 0.486);
        }

        input,
        select {
            width: 195px;
            height: 23px;
        }


        button {
            width: 200px;
            height: 40px;
            font-size: 18px;
            background-color: rgb(40, 201, 207);
            border: none;
            color: white;
            margin-left: 55px;
        }
    </style>
</head>

<body>
    <div>
        <h1>信息填写</h1>
        <form action="#">
            账号：<input type="text" name="txt" value="" id="account" placeholder="不少于5位的纯数字">&emsp;<span
                id="accountMistake"></span><br><br>

            性别：
            <select name="" id="sex">
                <option>男</option>
                <option>女</option>
            </select><br><br>

            出生日期：<input type="date" id="date"><br><br>

            电子邮箱: <input type="email" name="mail" value="" id="email1">&emsp;<span id="mailMistake"></span></br><br>

            手机号：<input type="text" name="phone" value="" id="phoneNumber">&emsp;<span id="phoneMistake"></span><br><br>

            部门：<input type="text" id="branch">&emsp;<span id="branchMistake"></span><br><br>

            入职日期：<input type="date" id="entry"><br><br>

            验证码：
            <input type="text" name="code" value="" id="verifyCode">&emsp;<span id="code"></span><span
                id="codeMistake"></span></br><br>

            <button type="button" id="getCode">获取验证码</button><br><br>
            <button type="submit" id="getSubmit">提交</button><br>
        </form>
    </div>
    <script>

        let randomCode = 0;    //randomCode定义在里面的话后边的接收不到
        // 随机生成验证码
        document.querySelector('#getCode').addEventListener('click', function () {
            randomCode = Math.floor(Math.random() * (9999 - 1000 + 1) + 1000);
            document.querySelector('#code').innerHTML = randomCode

        })


        function rightAll() {
            let isValid = true


            // 账号，字符串开头包含大小写以及数字，4-15位
            var reg = /^\d{5,}$/
            var ipts1 = document.querySelector('#account')
            // console.log(ipts1);
            if (!reg.test(ipts1.value)) {
                document.querySelector('#accountMistake').innerHTML = '用户名输入不符合规范';
                document.querySelector("#accountMistake").style.color = "red";
                isValid = false;
            } else {
                document.querySelector("#accountMistake").innerHTML = "√";
                document.querySelector("#accountMistake").style.color = "green";
            }


            // 邮箱
            var reg2 = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            var ipts3 = document.querySelector('#email1')
            // console.log(ipts3);
            if (!reg2.test(ipts3.value)) {
                document.querySelector('#mailMistake').innerHTML = '邮箱输入不符合规范'
                document.querySelector("#mailMistake").style.color = "red"
                isValid = false
            } else {
                document.querySelector("#mailMistake").innerHTML = "√"
                document.querySelector("#mailMistake").style.color = "green"
            }

            // 手机号验证
            var reg3 = /^1[3456789]\d{9}$/
            var ipts4 = document.querySelector('#phoneNumber')
            // console.log(ipts4);
            if (!reg3.test(ipts4.value)) {
                document.querySelector('#phoneMistake').innerHTML = '手机号码输入不符合规范'
                document.querySelector("#phoneMistake").style.color = "red"
                isValid = false

            } else {
                document.querySelector("#phoneMistake").innerHTML = "√"
                document.querySelector("#phoneMistake").style.color = "green"
            }


            // 验证码
            var ipts5 = document.querySelector('#verifyCode')
            if (ipts5.value != randomCode || ipts5.value == "") {
                document.querySelector('#codeMistake').innerHTML = '验证码不正确'
                document.querySelector("#codeMistake").style.color = "red"
                isValid = false
            } else {
                document.querySelector("#codeMistake").innerHTML = "√"
                document.querySelector("#codeMistake").style.color = "green"
            }

            // 部门
            var ipts6 = document.querySelector('#branch')
            if (ipts6.value == "") {
                document.querySelector('#branchMistake').innerHTML = '部门信息未填写'
                document.querySelector("#branchMistake").style.color = "red"
                isValid = false
            } else {
                document.querySelector("#branchMistake").innerHTML = "√"
                document.querySelector("#branchMistake").style.color = "green"
            }

            return isValid;
        }

        // 提交
        document.querySelector('#getSubmit').addEventListener('click', function (e) {
            e.preventDefault();

            if (rightAll() == true) {

                var obj = {
                    account: document.getElementById('account').value,
                    sex: document.getElementById('sex').value,
                    date: document.getElementById('date').value,
                    email1: document.getElementById('email1').value,
                    phoneNumber: document.getElementById('phoneNumber').value,
                    branch: document.getElementById('branch').value,
                    entry: document.getElementById('entry').value
                }
                console.log(obj);

                localStorage.setItem('message', JSON.stringify(obj))
                location.assign('./登录.html')
            }
        })
    </script>
</body>

</html>